import React from 'react';
import { Heart, Github, ExternalLink } from 'lucide-react';

const Footer = () => {
  return (
    <footer className="bg-white/80 backdrop-blur-sm border-t border-gray-200/50 mt-auto">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
          <div className="flex items-center space-x-2 text-gray-600">
            <span>Made with</span>
            <Heart className="w-4 h-4 text-red-500" />
            <span>by SVG Viewer</span>
          </div>
          
          <div className="flex items-center space-x-6 text-sm text-gray-500">
            <a 
              href="https://github.com" 
              target="_blank" 
              rel="noopener noreferrer"
              className="flex items-center space-x-1 hover:text-blue-600 transition-colors"
            >
              <Github className="w-4 h-4" />
              <span>GitHub</span>
            </a>
            <a 
              href="https://developer.mozilla.org/en-US/docs/Web/SVG" 
              target="_blank" 
              rel="noopener noreferrer"
              className="flex items-center space-x-1 hover:text-blue-600 transition-colors"
            >
              <ExternalLink className="w-4 h-4" />
              <span>SVG 文档</span>
            </a>
          </div>
        </div>
        
        <div className="mt-4 pt-4 border-t border-gray-200/50 text-center text-sm text-gray-500">
          <p>&copy; 2024 SVG Viewer. 一个优雅的 SVG 预览工具。</p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
